import React, {Component} from 'react';
import EventHandler from "../../rx/EventHandler";
import BookManagerActions from "./actions/BookManagerActions";

const ESCAPE_KEY = 27;
const ENTER_KEY = 13;

class TodoItem extends Component {
  constructor(props) {
    super(props);
    this.state = {
      editing: false,
      editText: this.props.todo.title
    }
  }

  getTodo () {
    return this.props.todo;
  }

  componentWillMount() {
    var setState = this.setState.bind(this);

    var toggleClick = EventHandler.create();
    toggleClick
      .map(this.getTodo)
      .subscribe(BookManagerActions.toggle);

    var destroyButtonClick = EventHandler.create();
    destroyButtonClick
      .map(this.getTodo)
      .subscribe(BookManagerActions.destroy);

    var labelDoubleClick = EventHandler.create();
    labelDoubleClick
      .map(function () {
        return {
          editing: true
        };
      })
      .subscribe(setState);

    var editFieldKeyDown = EventHandler.create();
    editFieldKeyDown
      .filter(function (event) {
        return event.keyCode === ESCAPE_KEY;
      })
      .map(function () {
        return {
          editing: false,
          editText: this.props.todo.title
        };
      }.bind(this))
      .subscribe(setState);

    editFieldKeyDown
      .filter(function (event) {
        return event.keyCode === ENTER_KEY;
      })
      .subscribe(this.submit);

    var editFieldBlur = EventHandler.create();
    editFieldBlur
      .subscribe(this.submit);


    var editFieldChange = EventHandler.create();
    editFieldChange
      .map(function (e) {
        return {
          editText: e.target.value
        };
      })
      .subscribe(setState);

    this.lifecycle.componentDidUpdate
      .filter(function (prev) {
        return this.state.editing && !prev.prevState.editing;
      }.bind(this))
      .subscribe(function () {
        var node = this.refs.editField.getDOMNode();
        node.focus();
        node.value = this.props.todo.title;
        node.setSelectionRange(node.value.length, node.value.length);
      }.bind(this));

    this.handlers = {
      toggleClick: toggleClick,
      destroyButtonClick: destroyButtonClick,
      labelDoubleClick: labelDoubleClick,
      editFieldKeyDown: editFieldKeyDown,
      editFieldBlur: editFieldBlur,
      editFieldChange: editFieldChange
    };
  }

  render() {
    return (
      <li className={React.addons.classSet({
        completed: this.props.todo.completed,
        editing: this.state.editing
      })}>
        <div className="view">
          <input
            className="toggle"
            type="checkbox"
            onChange={this.handlers.toggleClick}
            checked={this.props.todo.completed}
          />
          <label ref="label" onDoubleClick={this.handlers.labelDoubleClick}>
            {this.props.todo.title}
          </label>
          <button ref="destroyButton" className="destroy" onClick={this.handlers.destroyButtonClick}/>
        </div>
        <input
          ref="editField"
          className="edit"
          onKeyDown={this.handlers.editFieldKeyDown}
          onBlur={this.handlers.editFieldBlur}
          value={this.state.editText}
          onChange={this.handlers.editFieldChange}
        />
      </li>
    );
  }
}

export default TodoItem;
